<template>
  <!-- 4设备抗归属 -->

  <div style="background-color: white">
    <div class="tc">
      <div class="bg">
        <div class="title">
          当前网络节点归属组织概率分析
        </div>
        <div class="body">
          <div class="unit-info">
            <span>节点信息：</span>
            <span class="right-align">english.nudt.edu.cn host</span>
          </div>

          <div class="unit-info ">
            <span>归属组织预测：</span>
            <span class="right-align">归属于国防科技大学的概率为<span class="red-text"> 90%</span></span><br>
          </div>
          <div class="unit-info ">
            <span class="right-align">归属于中国农业大学的概率为<span class="orange-text"> 65%</span></span><br>
          </div>
          <div class="unit-info ">
            <span class="right-align">归属于合肥工业大学的概率为<span class="green-text"> 25%</span></span><br>
          </div>
          <div class="unit-info">
            <span>风险信息：</span>
            <span class="right-align redtext">存在归属单位泄露风险</span>
          </div>


          <div class="bt">
            <el-button class="bt1" @click="dialogVisible = true">
              抗设备归属
            </el-button>
            <!-- 新建抗设备归属弹窗 -->
            <el-dialog class="maindialog" title="新建抗设备归属任务" :visible.sync="dialogVisible" width="40%" z-index="1000">
              <div class="">
                <el-descriptions title="设备信息">
                  <el-descriptions-item label="IP地址">
                    202.197.9.10
                  </el-descriptions-item>
                  <el-descriptions-item label="归属单位">
                    国防科技大学
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <!-- 下面部分 -->
              <div class="">
                <el-descriptions title="抗设备归属定位配置">
                  <el-descriptions-item label="干扰方式">
                    <el-radio-group v-model="radio" @input="handleRadioChange">
                      <el-radio label="1">
                        基于单节点微扰动的抗归属组织分析
                      </el-radio>
                      <el-radio label="2">
                        基于知识图谱降效的抗归属组织分析
                      </el-radio>
                    </el-radio-group>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <!-- 混淆组织信息单选框列表 -->
              <div v-if="radio == 1">
                <span>混淆组织信息</span>
                <el-table ref="singleTable" :data="tableData" style="width: 100%" @row-click="handleRowClick">
                  <el-table-column label="" width="55">
                    <template slot-scope="scope">
                      <el-radio v-model="selectedRow" :label="scope.$index + 1"
                        @change="handleSelectionChange(scope.$index + 1, scope.row)" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="ip" label="IP地址" />
                  <el-table-column prop="obfuscatedAddress" label="混淆组织信息" />
                  <el-table-column prop="protectedAddress" label="受保护组织信息" />
                </el-table>
              </div>
              <!-- 另一个列表 基于知识图谱-->
              <div v-if="radio == 2">
                <span>设置混淆节点数量：</span>
                <el-input ref="inputTime" v-model="input" placeholder="请输入1-3位数字" style="width: 150px" />
              </div>
              <!-- //底部按钮 -->
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">
                  取消
                </el-button>
                <el-button type="primary" @click="showDetails">
                  提交
                </el-button>
              </div>
            </el-dialog>

            <el-button class="bt1" @click="todeviceestimate" >
              详情
            </el-button>
          </div>
        </div>
      </div>
      <div />
    </div>
    <el-dialog class="maindialog" :visible.sync="dialogDetails" width="30%" z-index="10000">
      <template #title>
        <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
          新建抗设备归属任务
        </div>
      </template>
      <span class="dialogDetailstext">新建抗设备归属任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",

      radio: "1",
      selectedRow: null, 
      dialogVisible: false,
      dialogDetails: false,
      tableData: [
        {
          ip: "166.111.0.65",
          obfuscatedAddress: "清华大学",
          protectedAddress: "国防科技大学",
        },
        {
          ip: "186.197.9.87",
          obfuscatedAddress: "河南工业大学",
          protectedAddress: "国防科技大学",
        },
        {
          ip: "138.197.9.13",
          obfuscatedAddress: "中国科学院大学",
          protectedAddress: "国防科技大学",
        },
        {
          ip: "162.105.203.15",
          obfuscatedAddress: "北京大学",
          protectedAddress: "国防科技大学",
        },
        {
          ip: "153.197.9.42",
          obfuscatedAddress: "郑州大学",
          protectedAddress: "国防科技大学",
        },
      ],
    };
  },
  methods: {

    todeviceestimate() {
      this.$router.push("/deviceestimate");
    },

    handleRadioChange(value) {
      if (value == 2) {
        this.$refs.inputTime.focus()
      }
    },
    showDetails() {
      this.dialogVisible = false;
      this.dialogDetails = true;
    },
    handleRowClick() {

    },
    handleSelectionChange(index) {
      this.selectedRow = index;
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}


.bt1 {
  background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
  color: #5298e1;
  color: #fff;
  border-width: 2px;
  border: none;
  text-align: center;
  margin: 20px;
}

.bt {
  position: absolute;
  top: 170px;
  left: 90px;
}

.body {
  width: 100%;
  position: absolute;
  top: 65px;
  color: #90CEE9;
  /* text-align: left; */
  font-size: 18px;
  padding: 10px;

}

.tc {
  position: absolute;
  top: 80px;
  right: 50px;
  width: 450px;
  height: 300px;
  z-index: 10000;
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.title {
  text-align: center;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  font-weight: bold;
  position: absolute;
  top: 20px;
  right: 60px;
}

.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}
</style>